<!-- 当前组件名： component -->
<template>
  <div class='role_index-authUser' v-loading="loading">
    <div class='page_component-container'>
      <cfCard title='' class='page-container-search'>
        <el-form slot='content' class='searchArea' :model='searchParam' ref='searchParam' label-width='100px' inline size='small'>
          <el-form-item label='用户名称'>
            <el-input v-model='searchParam.userName' placeholder='请输入用户名称' v-search="handleSearch"></el-input>
          </el-form-item>
          <el-form-item label='手机号码'>
            <el-input v-model='searchParam.phonenumber' placeholder='请输入手机号码' v-search="handleSearch"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size='mini' type='primary' @click='handleSearch'>查询</el-button>
            <el-button size='mini' @click='handleReset'>重置</el-button>
          </el-form-item>
        </el-form>
      </cfCard>
      <div class='bottom12'></div>
      <cfCard title='列表' hasTable :tableObj='tableDataObj' class='page_component-container-bottom'>
        <!--表格区域-->
        <template slot='btn'>
          <el-button size='mini' type='primary' v-hasPermi="['system:role:edit']" @click='handleAdd'>新增</el-button>
        </template>
        <template slot='content'>
          <cfTable ref='cfTable' :tableDataObj='tableDataObj' :tableData='tableData'>
            <template slot='status'>
              <el-table-column label='状 态' width='100px'>
                <dict-tag slot-scope="{row}" :options="sysNormalDisable" :value="row.status"/>
              </el-table-column>
            </template>
            <template slot='operate'>
              <el-table-column label='操 作' width='100px' align='right' v-if="hasPermiOr(['system:role:edit'])">
                <span slot-scope='{row}'>
                  <el-button type='text' size='small' class='delete-span' v-hasPermi="['system:role:remove']" @click='cancelAuthUser(row)'>取消授权</el-button>
                </span>
              </el-table-column>
            </template>
          </cfTable>
          <pagination :total='queryParams.total' :page.sync='queryParams.pageNum' :limit.sync='queryParams.pageSize' @pagination='getListFn'/>
        </template>
      </cfCard>
    </div>
    
    <selectUser v-if="dialogObj.visible" :dialogObj="dialogObj" @refresh="handleSearch"></selectUser>
  </div>
</template>

<script>
import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
import selectUser from "./selectUser";
export default {
  name: 'authUser',
  components: {selectUser},
  props: {
    pageDialogObj: {
      type: Object,
      default: ({
        visible: false,
        id: '',
        title: '',
        width: ''
      })
    }
  },
  data() {
    return {
      attr: '属性',
      tableDataObj: {
        id: 'id',
        showSelection: true,
        showIndex: true,
        defaultExpandAll: true,
        treeProps: {children: 'children', hasChildren: 'hasChildren'},
        option: [
          {id: 1, label: '用户名称', prop: 'userName', show: 1, needSlot: false},
          {id: 2, label: '用户昵称', prop: 'nickName', show: 1, needSlot: false},
          {id: 3, label: '邮箱', prop: 'email', show: 1, needSlot: false},
          {id: 4, label: '手机', prop: 'phonenumber', show: 1, needSlot: false},
          {id: 5, label: '状态', prop: 'status', show: 1, needSlot: true},
          {id: 6, label: '创建时间', prop: 'createTime', show: 1, needSlot: false},
        ]
      },
      tableData: [],
      dialogObj: {
        visible: false,
        id: null,
        title: '新增',
        width: '638px',
        appendToBody: true,
        modalAppendToBody: true
      },
      form: {
        attr: ''
      },
      optionsList: [],
      searchParam: {
        roleId: '',
        userName: '',
        phonenumber: '',
      },
      queryParams: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      loading: true
    }
  },
  computed: {
    newAttr() {
      return '测试数据'
    },
  },
  created() {
    if(this.pageDialogObj.id) {
      this.searchParam.roleId = this.pageDialogObj.id;
    }
    this.getListFn();
    this.getSysNormalDisable();
  },
  methods: {
    /**获取列表数据方法*/
    async getListFn() {
      this.loading = true;
      const data = {
        ...this.queryParams,
        ...this.searchParam
      }
      const res = await allocatedUserList(data);
      if(res.code == 200) {
        this.tableData = res.rows;
        this.queryParams.total = res.total;
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    /**新增列表数据方法*/
    handleAdd() {
      this.dialogObj.visible = true;
      this.dialogObj.id = this.pageDialogObj.id;
      this.dialogObj.title = '新增用户';
    },
    /** 取消授权按钮操作 */
    cancelAuthUser(row) {
      const roleId = this.searchParam.roleId;
      this.$modal.confirm('确认要取消该用户"' + row.userName + '"角色吗？').then(async()=> {
        this.loading = true;
        let res = await authUserCancel({ userId: row.userId, roleId: roleId });
        if(res.code == 200) {
          this.$modal.msgSuccess("取消授权成功");
          this.getListFn();
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
        
      }).catch(() => {});
    },
    /**查询按钮事件*/
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.queryParams.total = 0;
      this.getListFn();
    },
    /**重置按钮事件*/
    handleReset() {
      this.$refs.searchParam.resetFields();
      this.handleSearch();
    },
  },
}
</script>

<style scoped lang='scss'>
.role_index-authUser {
  .page_component-container {

  }
}
</style>